<!--
 * @Author: lijing
 * @e-mail: 1413979079@qq.com
 * @LastEditors: lijing
 * @Date: 2019-10-10 14:12:22
 * @LastEditTime: 2020-05-15 10:25:17
 * @FilePath: \client\src\views\ArticleDetails.vue
 * @Description: 文章详细信息页面，用于展示一篇文章的所有内容
 -->

<template>
  <div>
    <nav-bar></nav-bar>
    <b-container class="main bg-img">
      <!-- 文章标题 -->
      <h3 class="title">{{article.title}}</h3>
      <!-- 文章描述 -->
      <h6 class="description">
        <b-badge variant="info">{{article.type==1 ? '原创' : '转载'}}</b-badge>&nbsp;&nbsp;
        <i class="icon iconfont icon-riqi"></i>
        &nbsp;{{article.gmtUpdate}}
        &nbsp;&nbsp;
        <i
          class="icon iconfont icon-gaojian-zuozhe"
        ></i>
        &nbsp;{{article.author}}
        &nbsp;&nbsp;
        <i class="icon iconfont icon-yuedu"></i>
        &nbsp;{{article.views}}
        &nbsp;&nbsp;
        <i class="icon iconfont icon-fenlei"></i>
        &nbsp;{{article.category}}
      </h6>
      <!-- 文章内容 -->
      <!-- <div v-html="content"></div> -->
      <VueShowdown
        :markdown="content"
        flavor="vanilla"
        :options="{ emoji: true }"
        :extensions="extensions"
      />
      <!-- 标签 -->
      <div class="tag-box">
        <b-link class="tag" variant="info" v-for="(tag,index) in article.tags" :key="index">
          <i class="icon iconfont icon-tag"></i>
          {{tag}}
        </b-link>
      </div>
      <!-- 评论回复 -->
      <hr />
      <h5>总共有{{comments.length}}条评论</h5>
      <hr />
      <!-- 一级评论列表 start -->
      <b-media v-for="comment in comments" :key="comment.id">
        <template v-slot:aside>
          <b-img width="60" height="60" :src="comment.commentatorAvatarUrl"></b-img>
        </template>
        <h6 thumbnail class="commentator-name" v-text="comment.commentatorName"></h6>
        <p>{{comment.content}}</p>
        <p>
          <i class="icon iconfont icon-dianzan1 link-icon"></i>
          <i class="icon iconfont icon-pinglun link-icon" @click="toggle(comment.id)"></i>
          {{comment.secondLevelComments.length}}
        </p>
        <div v-show="activeIndex == comment.id">
          <!-- 二级评论列表 start -->
          <b-media v-for="cll in comment.secondLevelComments" :key="cll.id">
            <template v-slot:aside>
              <b-img width="60" height="60" :src="cll.commentatorAvatarUrl"></b-img>
            </template>
            <h6 thumbnail class="commentator-name" v-text=" cll.commentatorName"></h6>
            <p>{{cll.content}}</p>
          </b-media>
          <!-- 二级评论 end -->
          <hr />
          <b-textarea placeholder="请输入评论内容......" v-model="slcContent"></b-textarea>
          <b-button class="pull-right" variant="success" @click="doComment(comment.id,2)">提交</b-button>
        </div>
      </b-media>
      <!-- 一级评论列表 end -->
      <hr />
      <b-media>
        <template v-slot:aside>
          <b-img
            width="60"
            height="60"
            :src="commToken ? userInfo.avatarUrl : '/static/images/no-name.png'"
          ></b-img>
        </template>
        <h6 thumbnail class="commentator-name" v-text="commToken ? userInfo.name : '匿名用户'"></h6>
      </b-media>
      <b-textarea placeholder="请输入评论内容......" v-model="commentContent"></b-textarea>
      <b-button variant="success" class="pull-right" @click="doComment(null,1)">提交</b-button>
      <!-- 回顶部按钮 -->
      <i class="icon iconfont icon-huidingbu" @click="backTop()"></i>
    </b-container>
    <Footer></Footer>
  </div>
</template>

<script>
import url from "@/request/url";
import showdownHighlight from "showdown-highlight";
import { mapState } from "vuex";
export default {
  name: "ArticleDetails",
  data() {
    return {
      article: {},
      comments: [],
      content: "",
      slcContent: "",
      commentContent: "",
      extensions: [showdownHighlight],
      activeIndex: -1
    };
  },
  components: {
    Footer: () => import("@/components/Footer"),
    NavBar: () => import("@/components/NavBar")
  },
  computed: {
    ...mapState({
      commToken: state => state.app.commToken,
      userInfo: state => state.user.userInfo
    })
  },
  methods: {
    toggle(id) {
      if (this.activeIndex == -1) {
        this.activeIndex = id;
      } else {
        this.activeIndex = -1;
      }
    },
    //回到顶部
    backTop() {
      let back = setInterval(() => {
        if (document.body.scrollTop || document.documentElement.scrollTop) {
          document.body.scrollTop -= 50;
          document.documentElement.scrollTop -= 50;
        } else {
          clearInterval(back);
        }
      });
    },
    getAllComments() {
      this.$axios
        .get(url.comm.comment + this.article.id)
        .then(res => (this.comments = res.data));
    },
    doComment(id, type) {
      if (type == 1 && this.commentContent == "") return;
      if (type == 2 && this.slcContent == "") return;
      let formData = {
        content: type == 1 ? this.commentContent : this.slcContent,
        type: type,
        articleId: this.article.id,
        parentId: id,
        commentator: this.commToken ? this.userInfo.id : 0
      };
      this.$axios.post(url.comm.comment, formData).then(res => {
        this.slcContent = "";
        this.commentContent = "";
        // 重新获取所有评论
        this.getAllComments();
      });
    }
  },
  activated() {
    this.$axios
      .get(url.comm.getArticleById + this.$route.params.articleId)
      .then(resp => {
        this.article = resp.data;
        // markdown 转 html
        this.content = this.article.content;
        // 获取所有评论，因为axios为异步操作，下面的操作不能写在该函数的外面
        this.getAllComments();
      });
  }
};
</script>

<style scoped>
.main {
  padding: 20px 3%;
  /* 防止当文章内容较少的时候，出现上下颜色不一致的问题 */
  min-height: 100%;
  /* 解决元素浮动后从父元素溢出的问题 */
  overflow: auto;
}

.title,
.description {
  text-align: center;
  margin: 10px 0;
}

.tag-box {
  margin-left: 10px;
  display: flex;
  flex-direction: row;
  justify-content: left;
}

.tag {
  text-decoration: none;
  margin-left: 5px;
}

.commentator-name {
  font-weight: bold;
  text-align: left;
}

.link-icon {
  margin-right: 5px;
}

.link-icon:hover {
  color: #337ab7;
}

textarea {
  margin: 10px 0;
}

/* 回顶部按钮 start */
.icon-huidingbu:before {
  font-size: 25px;
}

.icon-huidingbu {
  text-align: center;
  width: 37px;
  height: 37px;
  position: fixed;
  left: 92%;
  top: 80%;
}

.icon-huidingbu:hover {
  border-radius: 6px;
  background-color: #495057;
  color: #eee;
}

/* 回顶部按钮 end */
</style>
